﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="GetPwd.aspx.cs" Inherits="GetPwd" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
          /* 表单中心标题 */
       .auto-style1{
            text-align: right;
            height: 17px;
            width: 100%;
            max-width: 600px;
            margin: auto;
            border-spacing: 10px;
    

            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        /*.tdright {
            text-align: right;
            padding-right: 10px;
        }*/
         /* 表单中心标题 */
        .tdcenter {
            text-align: center;
            font-weight: bold;
            font-size: 22px;
            padding-bottom: 10px;
            color: #d63384;
        }
       /*常见问题*/
         .faq-section {
            background-color: #fbf9c9;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            margin-top: 20px;
            transition: all 0.3s ease;

        }

        .faq-section h3 {
            color: #d63384;
            font-size: 24px;
            margin-bottom: 15px;
            text-align: left;
        }

        .faq-item {
            margin-bottom: 15px;

        }

        .faq-question {
            font-weight: bold;
            cursor: pointer;
            font-size: 18px;
            color: #333;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }

        .faq-question::before {
            content: '+';
            color: #d63384;
            font-size: 20px;
            margin-right: 10px;
            transition: transform 0.3s ease;
        }

        .faq-answer {
            display: none;
            font-size: 16px;
            color: #666;
            padding-left: 30px;
            margin-top: 5px;
        }

        .faq-question.active::before {
            content: '-';
            transform: rotate(45deg);
        }

        .health-notice {
            background-color: #f0f8ff; 
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;

        }

        /* 标题颜色 */
        .health-notice .title {
            font-size: 18px;
            font-weight: bold;
            color: #d63384; /* 标题的柔和粉色，保持与页面主题一致 */
            margin-bottom: 15px;
        }

        /* 提示文字颜色与图标样式 */
        .health-notice ul li {
            font-size: 16px;
            margin-bottom: 10px;
            color: #333; /* 文字采用较深的灰色，确保可读性 */
        }

        .health-notice ul li i {
            color: #4caf50; /* 图标采用绿色，给人安全、健康的感觉 */
            margin-right: 8px;
        }

        /* 链接样式 */
        .health-notice ul li a {
            color: #007bff; /* 链接使用蓝色，增强可点击性 */
            text-decoration: none;
        }

        .health-notice ul li a:hover {
            text-decoration: underline;
        }


        .health-notice ul li span {
            font-size: 16px;
        }
        .health-notice li:before {
            content: "✔"; /* 使用复选标记符号 */
            color: #28a745;
            margin-right: 8px;
        }
        /* 弹出框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .help-video-section {
            background-color: #f0f8ff; /* 柔和的浅蓝色背景 */
            margin-top: 20px;

         padding: 15px;
         border-radius: 8px;
        }

        .help-video-section h3 {
            color: #d63384;
            font-size: 22px;
            margin-bottom: 15px;
            font-weight: bold;
            text-shadow: 1px 1px 2px #ccc;
        }

        .help-video-section video {
            width: 100%; /* 自动适应宽度 */
            height: auto;
            border-radius: 8px;
            border: 2px solid #ddd;
            transition: transform 0.3s ease;
        }

        .help-video-section video:hover {
            transform: scale(1.05); /* 鼠标悬停时放大 */
        }

        .help-video-section p {
            font-size: 16px;
            color: #555;
            margin-top: 10px;
            font-style: italic;
        }

    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <table class="auto-style1">
      <tr>
        <td class="tdcenter" colspan="2">找回密码</td>
      </tr>
      <tr>
        <td class="tdright">用户名:</td>
        <td>
          <asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
        <td>
          <asp:RequiredFieldValidator ControlToValidate="txtName" Display="Dynamic" ForeColor="Red" ID="rfvName" runat="server" ErrorMessage="必填"></asp:RequiredFieldValidator>
        </td>
      </tr>
      <tr>
        <td class="tdright">邮箱:</td>
        <td>
          <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>
        <td>
          <asp:RequiredFieldValidator ControlToValidate="txtEmail" Display="Dynamic" ForeColor="Red" ID="rfvEmail" runat="server" ErrorMessage="必填"></asp:RequiredFieldValidator>
        </td>
      </tr>
      <tr>
        <td class="tdright" colspan="2">
          <asp:RegularExpressionValidator ID="revEmail" runat="server"
            ErrorMessage="邮箱格式不正确！" ControlToValidate="txtEmail" Display="Dynamic" ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
        </td>
      </tr>
      <tr>
        <td class="tdright" colspan="2">
          <asp:Button ID="btnResetPwd" runat="server" Text="找回密码" OnClick="btnResetPwd_Click" />
        </td>
      </tr>
      <tr>
        <td colspan="2">找回密码，需要验证邮箱！</td>
      </tr>
      <tr>
        <td colspan="2">
          <asp:Label ID="lblMsg" runat="server" ForeColor="Red"></asp:Label></td>
      </tr>

    </table>
    <div class="faq-section">
    <h3>常见问题解答</h3>
    <div class="faq-item">
        <div class="faq-question">收不到找回密码的邮件怎么办？</div>
        <div class="faq-answer">请检查垃圾邮件文件夹，或者确保您的邮箱没有阻挡来自系统的邮件。若问题依旧存在，请联系技术支持。</div>
    </div>
    <div class="faq-item">
        <div class="faq-question">忘记用户名怎么办？</div>
        <div class="faq-answer">您可以通过联系技术支持找回用户名，或使用绑定的邮箱进行找回操作。</div>
    </div>
    <div class="faq-item">
        <div class="faq-question">如何确保密码安全？</div>
        <div class="faq-answer">请使用大小写字母、数字和特殊符号的组合，避免使用容易被猜测的信息，如生日或手机号。建议定期更改密码。</div>
    </div>
</div>
    <script>
        document.querySelectorAll('.faq-question').forEach(function (question) {
            question.addEventListener('click', function () {
                this.classList.toggle('active');
                const answer = this.nextElementSibling;
                if (answer.style.display === 'block') {
                    answer.style.display = 'none';
                } else {
                    answer.style.display = 'block';
                }
            });
        });


    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
  <!-- 健康提示与通知 -->
<div class="health-notice">
    <div class="title">健康相关提示与通知</div>
    <ul>
        <li>
            <i class="fas fa-lock"></i>
            <span>定期更改密码，保持账户安全。</span>
            <a href="#" class="learn-more" onclick="showDetails('password-safety')">了解更多</a>
        </li>
        <li>
            <i class="fas fa-user-shield"></i>
            <span>不要将账户密码透露给他人。</span>
            <a href="#" class="learn-more" onclick="showDetails('password-sharing')">了解更多</a>
        </li>
        <li>
            <i class="fas fa-mobile-alt"></i>
            <span>使用两步验证，提升账户安全性。</span>
            <a href="#" class="learn-more" onclick="showDetails('two-factor')">了解更多</a>
        </li>
        <li>
            <i class="fas fa-running"></i>
            <span>每天保持适度运动，增强体质。</span>
            <a href="#" class="learn-more" onclick="showDetails('daily-exercise')">了解更多</a>
        </li>
        <li>
            <i class="fas fa-bed"></i>
            <span>保持充足的睡眠，增进身心健康。</span>
            <a href="#" class="learn-more" onclick="showDetails('sleep-health')">了解更多</a>
        </li>
    </ul>
</div>

<!-- 添加各个详细信息的弹出框 -->
<div id="password-safety" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('password-safety')">&times;</span>
        <h3>密码安全提示</h3>
        <p>定期更改密码，并确保使用包含大写、小写、数字和特殊字符的强密码，可以有效防止账户被黑客入侵。</p>
    </div>
</div>

<div id="password-sharing" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('password-sharing')">&times;</span>
        <h3>账户密码保护</h3>
        <p>请不要将账户密码告知他人，即使是亲密的朋友或家人，也应妥善保管密码，以避免不必要的风险。</p>
    </div>
</div>

<div id="two-factor" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('two-factor')">&times;</span>
        <h3>两步验证</h3>
        <p>启用两步验证（2FA）可以极大提升账户的安全性。即使密码泄露，攻击者也无法轻易访问您的账户。</p>
    </div>
</div>

<div id="daily-exercise" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('daily-exercise')">&times;</span>
        <h3>适度运动的好处</h3>
        <p>每天保持适当的运动，可以帮助提升免疫力，增强身体抵抗疾病的能力，同时有助于维持健康的体重和心血管健康。</p>
    </div>
</div>

<div id="sleep-health" class="modal">
    <div class="modal-content">
        <span class="close" onclick="closeModal('sleep-health')">&times;</span>
        <h3>睡眠与健康</h3>
        <p>确保每天有7-9小时的优质睡眠，充足的休息可以提高您的专注力、免疫力和整体生活质量。</p>
    </div>
</div>


    <script>
        function showDetails(id) {
            document.getElementById(id).style.display = 'block';
        }

        function closeModal(id) {
            document.getElementById(id).style.display = 'none';
        }


    </script>

    <!-- 在找回密码页面的右侧添加视频帮助模块 -->
<div class="help-video-section">
    <h3>密码找回帮助视频</h3>
    
    <!-- 使用本地视频文件 -->
    <video width="320" height="240" controls>
        <source src="image/video.mp4" type="video/mp4">
        您的浏览器不支持 video 标签。
    </video>

    
    <p>观看此视频，了解如何快速找回您的密码。</p>
</div>
</asp:Content>

